<template>
  <div class="myContainer">
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <el-tabs type="border-card">
          <el-tab-pane label="任务基础信息">
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务名称 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务名称"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务状态 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务状态"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务ID :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务ID"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                所属小区 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="所属小区"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                所诉计划 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="所诉计划"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务对象 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务对象"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务责任人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务责任人"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务执行人 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务检查人"></el-input>
              </el-col>
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                联系电话 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="联系电话"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务开始时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务开始时间"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务截止时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务截止时间"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="3" class="myLeftMsg">
                <span class="require myVA_M">*</span>
                任务完成时间 :
              </el-col>
              <el-col :span="6">
                <el-input placeholder="任务完成时间"></el-input>
              </el-col>
            </el-row>
            <el-row class="myPaddingBottom_10px">
              <el-col :span="6" :offset="3">
                <el-button type="primary" class="myBgGreen">关 闭</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="任务相关信息">
            <el-container>
              <el-aside style="myContainerLeft_300px">
                <ul class="myTimeAxis">
                  <li v-for="item in timeAxisList">
                    <span class="time">{{item.time}}</span>
                    <span class="line"></span>
                    <span class="circle"></span>
                    <span class="img"><img src="static/images/step1.png"></span>
                    <span class="promptFont">{{item.promptFont}}</span>
                  </li>
                </ul>
              </el-aside>
              <el-main class="myPaddingLeft_10px">
                <el-row>
                  <!-- 基本信息框 start -->
                  <el-col :span="24" class="myBorder">
                    <el-row class="myTitle">
                      <el-col>操作信息</el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        操作人员:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="操作人员"></el-input>
                      </el-col>
                      <el-col :span="3" class="myLeftMsg">
                        操作时间:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="操作时间"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        处理动作:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="处理动作"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        处理动作描述:
                      </el-col>
                      <el-col :span="19">
                        <el-input type="textarea" placeholder="处理动作描述"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px"></el-row>
                  </el-col>
                  <!-- 基本信息框 end -->
                  <!-- 任务信息框 start -->
                  <el-col :span="24" class="myBorder">
                    <el-row class="myTitle">
                      <el-col :span="2">任务信息</el-col>
                      <el-col :span="14">任务当前状态：<span class="status">未处理</span></el-col>
                    </el-row>
                    <el-row class="myChildTitle">
                      <el-col :span="24">任务基础信息</el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        所属计划:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="所属计划"></el-input>
                      </el-col>
                      <el-col :span="3" class="myLeftMsg">
                        任务责任人:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务责任人"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        任务开始时间:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务开始时间"></el-input>
                      </el-col>
                      <el-col :span="3" class="myLeftMsg">
                        任务执行人:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务执行人"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        任务截止时间:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务截至时间"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="3" class="myLeftMsg">
                        任务完成时间:
                      </el-col>
                      <el-col :span="8">
                        <el-input placeholder="任务完成时间"></el-input>
                      </el-col>
                    </el-row>
                    <el-row class="myChildTitle">
                      <el-col :span="24">任务内执行项目信息</el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="8" class="myLeftMsg">
                        <el-input placeholder="输入关键字进行查询"></el-input>
                      </el-col>
                      <el-col :span="3">
                        <el-button type="primary" class="myBgGreen">查 询</el-button>
                      </el-col>
                    </el-row>
                    <el-row class="myPaddingTop_10px">
                      <el-col :span="24">
                        <template>
                          <el-table
                            border
                            :data="tableData"
                            style="width: 100%">
                            <el-table-column type="expand">
                              <template slot-scope="props">
                                <el-row>
                                  <el-col :span="2" :offset="2">处理信息:</el-col>
                                  <el-col :span="20" class="myTextAlignLeft">风机运行正常，运行中无异响</el-col>        
                                </el-row>
                                <el-row>
                                  <el-col :span="2" :offset="2">图片信息:</el-col>
                                  <el-col :span="20" class="myTextAlignLeft">
                                    <img src="static/images/loading.gif" />
                                    <img src="static/images/loading.gif" />
                                    <img src="static/images/loading.gif" />
                                  </el-col>        
                                </el-row>
                              </template>
                            </el-table-column>
                            <el-table-column
                              label="序号"
                              type="index"
                              width="100">
                            </el-table-column>
                            <el-table-column
                              label="执行项目"
                              prop="project">
                            </el-table-column>
                            <el-table-column
                              label="检查结论"
                              prop="conclusion">
                            </el-table-column>
                          </el-table>
                        </template>
                      </el-col>
                    </el-row>



                    <el-row class="myPaddingTop_10px"></el-row>
                  </el-col>
                  <!-- 任务信息框 end -->
                </el-row>
              </el-main>
            </el-container>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    
  </div>

</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myLineHeight_45px{
    line-height: 45px;    
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
  .myDialogSearchText{
    width: 360px;
  }
  .myContainerLeft_300px{
    width: 300px;
  }
  /*----时间轴效果css start---*/
  .myTimeAxis{
    height: 600px;
    overflow-y:scroll;
  }
  .myTimeAxis>li{
    width: 100%;
    height: 50px;
    line-height: 50px;
    position: relative;
  }
  .myTimeAxis>li:hover{
    background: #f9f9f9;
    cursor: pointer;
  }
  .myTimeAxis>li.on{
    background: #eee;
  }
  .myTimeAxis>li>span{
    float: left;
    position: absolute;
  }
  .time{
    font-size: 12px;
    display: inline-block;
    width: 99px;
    left: 20px;
    white-space: nowrap;
    overflow:hidden;
    color: #898989;
  }
  .line{
    width: 1px;
    height: 100%;
    background: #ddd;
    vertical-align: middle;
    left: 130px;
  }
  .circle{
    width: 13px;
    height: 13px;
    background: #00c6a3;
    top: 50%;
    margin-top: -6.5px;
    left:123.5px;
  }
  .img{
    left: 150px;
  }
  .img img{
    margin-top: -4px;
  }
  .promptFont{
    font-size: 14px;
    left: 170px;
    color: #898989;
    width:120px;
    height: 100%;
    overflow:hidden;
  }
  /*----时间轴效果css end---*/
  .myPaddingLeft_10px{
    padding:0 0 0 10px;
  }
  .myBorder{
    border:1px solid #dcdcdc;
    padding: 5px;
    margin-bottom: 10px;
  }
  .myTitle{
    border-bottom: 1px solid #dcdcdc;
    font-size: 14px;
    font-weight: 500;
    height: 25px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myChildTitle{
    border-bottom:1px dashed #dcdcdc;
    padding-left: 20px;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
  }
  .status{
    color: #333;
  }
  .myTextAlignLeft{
    text-align: left;
  }
  /*--------改变滚动条样式 start-------*/
  ::-webkit-scrollbar {  
    width: 6px;
    height:6px;
  }   
  ::-webkit-scrollbar-track {  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;   
  }  
  ::-webkit-scrollbar-thumb { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    border-radius: 10px;  
  }
  /*--------改变滚动条样式 end-------*/
</style>

<script>


  export default {
    data(){
      return{
        timeAxisList:[
          {time:"2017/11/17 10:25",promptFont:"创建任务"},
          {time:"2017/11/17 10:25",promptFont:"指派执行人员"},
          {time:"2017/11/17 10:25",promptFont:"确认发送"}
        ],//时间轴数据列表
        tableData:[{project:"测试执行项目",conclusion:"测试结论"},{project:"测试执行项目",conclusion:"测试结论"}]
      }
    },
    components: {
        
    },
    mounted(){
      document.title = '模板任务计划管理';
      //点击时间轴的操作 start
      $(".myTimeAxis > li:first").addClass("on");
      $(".myTimeAxis > li").click(function(){
        $(this).addClass("on").siblings().removeClass("on");
        console.log("点击第"+($(this).index()+1)+"个li------"+$(this).find(".promptFont").text());
      })
      //点击时间轴的操作 end
    },
    methods:{     
      
      

    }
    
  }   


</script>



